<template>
  <div class="nav-btn-group right">
    <div class="input-box" style="display: inline-block;line-height: 32px">
      <transition name="right">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          size="small"
          v-show="inputShow"
          v-model="input"
          @blur="inputShow = false"
        ></el-input>
      </transition>
    </div>
    <el-button size="mini" icon="el-icon-search" @click="inputShow = !inputShow"></el-button>
    <el-button size="mini" @click="login">登出</el-button>
    <el-button size="mini" @click="register">注册</el-button>
  </div>
</template>

<script>
export default {
  name: 'nav-bar',
  data () {
    return {
      activeIndex: '/',
      input: '',
      inputShow: false
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key)
      this.$router.push({ path: key })
    },
    login () {
      localStorage.clear('userInfo')
      this.$router.push('/login')
    },
    register () {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="less" scoped>
.nav-btn-group {
  white-space: nowrap;
  position: relative;
  z-index: 1;
  line-height: 60px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,.06);
  .input-box {
    width: 200px;
    margin-right: -6px;
    overflow: hidden;
    vertical-align: middle;
  }
}
.v-enter {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: 1s;
}
.v-enter-to {
  opacity: 1;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.right-enter {
  transform: translateX(100%);
}
.right-enter-active,
.right-leave-active {
  transition: 1s;
}
.right-enter-to {
  transform: translateX(0);
}
.right-leave {
  transform: translateX(0);
}
.right-leave-to {
  transform: translateX(100%);
}
</style>
